<template>
  <div class="box">
    <a-card shadow="hover">
      <div class="info">
        <img
          class="avatar"
          src="@/assets/img/admin.png"
          width="100"
          draggable="false"
        />
        <p class="user_name">
          晴天流云
          <EditOutlined title="修改密码" @click="changePwd" />
        </p>
        <!-- 个人信息 -->
        <div class="line">
          <UserOutlined />
          <span>前端开发工程师</span>
        </div>
        <div class="line">
          <EnvironmentOutlined />
          <span>武汉市</span>
        </div>
      </div>
    </a-card>
  </div>
  <a-modal
    title="修改密码"
    :footer="null"
    v-model:visible="dialogFormVisible"
    :width="500"
  >
    <a-form
      :model="form"
      ref="userFormRef"
      :label-col="{ span: 4 }"
      :wrapper-col="{ span: 20 }"
    >
      <a-form-item
        label="密码"
        name="pwd"
        :rules="[
          {
            validator: validatePass,
            trigger: 'change',
          },
        ]"
      >
        <a-input v-model:value="form.pwd" type="password" clearable></a-input>
      </a-form-item>
      <a-form-item
        label="确认密码"
        name="confirmPwd"
        :rules="[
          {
            validator: validateConfirmPass,
            trigger: 'change',
          },
        ]"
      >
        <a-input
          v-model:value="form.confirmPwd"
          type="password"
          clearable
        ></a-input>
      </a-form-item>
      <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
        <a-space>
          <a-button @click="handleClick('reset')">重置</a-button>
          <a-button type="primary" @click="handleClick('save')"
            >保存</a-button
          ></a-space
        >
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import { getCurrentInstance, reactive, ref, toRefs } from "vue";

export default {
  setup() {
    const state = reactive({
      dialogFormVisible: false,
      form: { pwd: "", confirmPwd: "" },
    });

    const userFormRef = ref();

    const { proxy } = getCurrentInstance();

    const handleClick = (type) => {
      if (type === "reset") {
        userFormRef.value.resetFields();
        return;
      }
      userFormRef.value
        .validateFields()
        .then((value) => {
          console.log(value);
          const { pwd, confirmPwd } = value;
          proxy.$axios
            .put("/account/changePwd", { pwd, confirmPwd })
            .then((response) => {
              const { success, msg } = response;
              if (success) {
                proxy.$message.success("修改成功");
                state.dialogFormVisible = false;
              } else {
                proxy.$message.error(msg);
              }
            })
            .catch((err) => {
              proxy.$message.error(err);
            });
        })
        .catch((info) => {
          console.log("Validate Failed:", info);
        });
    };

    const changePwd = () => {
      state.dialogFormVisible = true;
    };

    const validatePass = async (_rule, value) => {
      if (value) {
        if (state.form.confirmPwd) {
          userFormRef.value.validateFields("confirmPwd");
        }
        return Promise.resolve();
      } else {
        return Promise.reject("请输入密码");
      }
    };

    const validateConfirmPass = async (_rule, value) => {
      if (!value) {
        return Promise.reject("请输入确认密码");
      } else if (value !== state.form.pwd) {
        return Promise.reject("两次密码不一致");
      } else {
        return Promise.resolve();
      }
    };

    return {
      userFormRef,
      ...toRefs(state),
      handleClick,
      changePwd,
      validatePass,
      validateConfirmPass,
    };
  },
};
</script>

<style lang="less" scoped>
.box {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .info {
    width: 300px;
    text-align: center;

    .user_name {
      padding: 16px 0;
      font-size: 20px;
      line-height: 2;
      text-align: center;
    }

    .line {
      text-align: left;
      color: #555;
      line-height: 32px;
      i {
        margin-right: 8px;
        font-size: 18px;
      }
    }
  }
}
</style>
